/**
 * 全局样式库
 * 2020/9/28
 * @Author zzd
 */

$box-prop: ('padding' , 'margin', 'border');
$box-direaction: ('top', 'right', 'bottom', 'left');
$colors: (red: #e54d42, orange: #f37b1d, yellow: #fbbd08, olive: #8dc63f, green: #39b54a,purple: #6739b6, cyan: #1cbbb4,
        blue: #0081ff, mauve: #9c26b0, pink: #e03997, brown: #a5673f, greys: #8799a3, gray: #aaaaaa, black: #333333, white: #ffffff);


/*-------字体大小---------*/
@for $i from 12 through 50 {
  .ft-#{$i} {
    font-size: 1px * $i;
  }
}

/*-------字体粗细---------*/
@for $i from 1 through 9 {
  .fw-#{$i} {
    font-weight: $i * 100;
  }
}

/*-------文字颜色和背景颜色---------*/
@each $key, $value in $colors {
  .text-#{$key} {
    color: $value;
  }
  .bg-#{$key} {
    background-color: $value;
    color: #ffffff;
  }
  .bg-#{$key}.light {
    color: $value;
    background-color: #fadbd9;
  }
}

/*-------圆角边框---------*/
@for $i from 1 through 50 {
  .br-#{$i} {
    border-radius: #{$i}px;
  }
}

/*-------边框---------*/
@for $i from 1 through 10 {
  .border-#{$i} {
    position: relative;
    &::after {
      position: absolute;
      content: "";
      width: 200%;
      height: 200%;
      border-radius: inherit;
      pointer-events: none;
      box-sizing: border-box;
      top: 0;
      left: 0;
      transform: scale(0.5);
      transform-origin: 0 0;
      border: #{$i}px solid #909399;
    }
  }
}
@for $i from 1 through 10 {
  @each $j in $box-direaction {
    .border-#{$j}-#{$i} {
      position: relative;
      &::after {
        position: absolute;
        content: "";
        width: 200%;
        height: 200%;
        border-radius: inherit;
        pointer-events: none;
        box-sizing: border-box;
        top: 0;
        left: 0;
        transform: scale(0.5);
        transform-origin: 0 0;
        border-#{$j}: #{$i}px solid #909399;
      }
    }
  }
}
@for $i from 1 through 10 {
  @each $key, $value in $colors {
    .border-#{$key}-#{$i} {
      position: relative;
      &::after {
        position: absolute;
        content: "";
        width: 200%;
        height: 200%;
        border-radius: inherit;
        pointer-events: none;
        box-sizing: border-box;
        top: 0;
        left: 0;
        transform: scale(0.5);
        transform-origin: 0 0;
        border: #{$i}px solid $value;
      }
    }
  }
}
@for $i from 1 through 10 {
  @each $j in $box-direaction {
    @each $key, $value in $colors {
      .border-#{$j}-#{$key}-#{$i} {
        position: relative;
        &::after {
          position: absolute;
          content: "";
          width: 200%;
          height: 200%;
          border-radius: inherit;
          pointer-events: none;
          box-sizing: border-box;
          top: 0;
          left: 0;
          transform: scale(0.5);
          transform-origin: 0 0;
          border-#{$j}: #{$i}px solid $value;
        }
      }
    }
  }
}


/*-------快捷字体相关预定义样式---------*/
.i-line-through {
  text-decoration: line-through;
}
.i-italic {
  font-style: italic;
}
.i-indent {
  text-indent: 2em;
}
.i-text-Abc {
  text-transform: Capitalize;
}
.i-text-ABC {
  text-transform: Uppercase;
}
.i-text-abc {
  text-transform: Lowercase;
}
.i-text-price::before {
  content: '¥';
  font-size: 80%;
  margin-right: 4px;
}
.i-text-price.en::before {
  content: '$';
}
.i-text-bold {
  font-weight: bold;
}
.i-text-center {
  text-align: center;
}
.i-text-left {
  text-align: left;
}
.i-text-right {
  text-align: right;
}


/*-------边距---------*/
@for $i from 0 through 200 {
  @each $j in $box-direaction {
    @each $p in $box-prop {
      // padding-left-2
      .#{$p}-#{$j}-#{$i} {
        #{$p}-#{$j} : #{$i}px;
      }
      // padding-2: 2px;
      .#{$p}-#{$i} {
        #{$p} : #{$i}px;
      }
    }
  }
}


/*-------行高---------*/
// 基础行高
.i-lh-base {
  line-height: 1;
}
// 动态行高
@for $i from 1 through 100 {
  // line-height
  .i-lh-#{$i} {
    line-height: 1px * $i;
  }
}


/*-------定位---------*/
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.fixed {
  position: fixed;
}
// absolute
.absolute-top {
  @extend .absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.absolute-center {
  @extend .absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
}

.absolute-lt {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.absolute-rt {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
.absolute-lb {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.absolute-rb {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
}

// fixed
.fixed-full {
  @extend .fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.fixed-top {
  @extend .fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

.fixed-center {
  @extend .fixed;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
}

/*-------flex布局---------*/
.flex {
  display: flex;
}
// 自动换行
.flex-wrap {
  @extend .flex;
  flex-wrap: wrap;
}
// flex横向布局
.flex-row {
  @extend .flex;
  flex-direction: row;
}
// flex纵向布局
.flex-column {
  @extend .flex;
  flex-direction: column;
}
.flex-sub {
  flex: 1;
}
.flex-twice {
  flex: 2;
}
.flex-treble {
  flex: 3;
}
// 副轴起点对齐
.align-start {
  @extend .flex;
  align-items: flex-start;
}
// 副轴终点对齐
.align-end {
  @extend .flex;
  align-items: flex-end;
}
// 副轴中间对齐（垂直对齐）
.align-center {
  @extend .flex;
  align-items: center;
}
.align-stretch {
  @extend .flex;
  align-items: stretch;
}
.self-start {
  @extend .flex;
  align-self: flex-start;
}
.self-end {
  @extend .flex;
  align-self: flex-end;
}
.self-stretch {
  @extend .flex;
  align-self: stretch;
}
.align-stretch {
  @extend .flex;
  align-items: stretch;
}
// 主轴起点对齐
.justify-start {
  @extend .flex;
  justify-content: flex-start;
}
// 主轴终点对齐
.justify-end {
  @extend .flex;
  justify-content: flex-end;
}
// 主轴居中对齐（水平对齐）
.justify-center {
  @extend .flex;
  justify-content: center;
}
.justify-between {
  @extend .flex;
  justify-content: space-between;
}
.justify-around {
  @extend .flex;
  justify-content: space-around;
}
// 横向布局水平居中对齐
.flex-row-center {
  @extend .flex-row;
  @extend .justify-center;
  @extend .align-center;
}
// 纵向布局水平居中对齐
.flex-column-center {
  @extend .flex-column;
  @extend .justify-center;
  @extend .align-center;
}

